<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            display: flex;
            gap: 20px;
            margin: 20px;
            align-items: center;
            flex-direction: column;
        }
        .image {
            width: 100%;
        }
        .text {
            width: 100%;
            font-size: 16px;
        }
        img {
            width: 100%;
            max-width: 600px;
        }
        @media (min-width: 600px) {
            .item { flex-direction: row; }
            .image { width: 50%; }
        }
    </style>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 第1组图文 -->
    <div class="item">
        <div class="image">
            <img src="替换为你的图片1链接" alt="图片1">
        </div>
        <div class="text">
            <p>这里是图片1的文字介绍。</p>
        </div>
    </div>

    <!-- 第2组图文 -->
    <div class="item">
        <div class="image">
            <img src="替换为你的图片2链接" alt="图片2">
        </div>
        <div class="text">
            <p>这里是图片2的文字介绍。</p>
        </div>
    </div>
</body>
</html>